<template>
	<view class="container">
		<view class="parent-component">
			<text>我是父组件页面</text>
			<uni-forms ref="searchForm" :model="searchForm">
				<uni-forms-item label="关键词">
					<uni-easyinput v-model="searchForm.keyword" placeholder="请输入搜索关键词" />
				</uni-forms-item>
				
				<uni-forms-item label="日期范围">
					<uni-datetime-picker 
						v-model="searchForm.dateRange"
						type="daterange"
						start="2020-01-01"
						end="2025-12-31"
						rangeSeparator="至"
					/>
				</uni-forms-item>
				
				<uni-forms-item label="分类">
					<uni-data-select
						v-model="searchForm.category"
						:localdata="categoryOptions"
						placeholder="请选择分类"
					/>
				</uni-forms-item>
				
				<uni-forms-item label="状态">
					<uni-data-checkbox
						v-model="searchForm.status"
						:localdata="statusOptions"
						multiple
					/>
				</uni-forms-item>
			</uni-forms>
			
			<view class="search-actions">
				<button type="primary" @click="handleSearch">搜索</button>
				<button type="default" @click="handleReset">重置</button>
			</view>
		</view>

		<!-- 搜索结果列表 -->
		<view class="search-results" v-if="resultList.length">
			<view class="result-item" v-for="(item, index) in resultList" :key="index">
				<view class="title">{{item.title}}</view>
				<view class="description">{{item.description}}</view>
				<view class="meta">
					<text>分类: {{item.category}}</text>
					<text>时间: {{item.date}}</text>
					<text>状态: {{item.status}}</text>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<uni-icons type="search" size="30" color="#999"></uni-icons>
			<text>暂无搜索结果</text>
		</view>
		<!-- 分页器 -->
		<uni-pagination 
			v-if="resultList.length"
			show-icon
			:total="total"
			:pageSize="pageSize"
			:current="currentPage"
			@change="handlePageChange"
		/>
	</view>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { getDemoArticle } from '@/apis/api'

export default {
	setup() {
		const searchForm = reactive({
			keyword: '',
			dateRange: [],
			category: '',
			status: []
		})

		const categoryOptions = [
			{ value: 1, text: '分类一' },
			{ value: 2, text: '分类二' },
			{ value: 3, text: '分类三' }
		]

		const statusOptions = [
			{ value: 1, text: '已发布' },
			{ value: 2, text: '待审核' },
			{ value: 3, text: '已下架' }
		]

		const resultList = ref([])
		const total = ref(0)
		const pageSize = ref(10)
		const currentPage = ref(1)

		const handleSearch = () => {
			console.log('搜索条件:', searchForm)
			resultList.value = [
				// 示例数据
			]
		}

		const handleReset = () => {
			searchForm.keyword = ''
			searchForm.dateRange = []
			searchForm.category = ''
			searchForm.status = []
		}

		const loadMore = () => {
			if (currentPage.value * pageSize.value >= total.value) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				})
				return
			}
			
			currentPage.value++
			handleSearch()
		}

		const handlePageChange = (e) => {
			currentPage.value = e.current
			handleSearch()
		}
		
		const loadData = async () => {
			try {
				const response2 = await getDemoArticle({ id: 172 });
				console.log('我是第二', response2.data)
				const response1 = await getDemoArticle({ id: 175 });
				console.log('我是第一', response1.data)
			} catch (err) {
				uinFun.setModal('错误提示', err)
			}
		}

		onMounted(() => {	
			loadData()
		})
		
		return {
			searchForm,
			categoryOptions,
			statusOptions,
			resultList,
			total,
			pageSize,
			currentPage,
			handleSearch,
			handleReset,
			handlePageChange,
		}
	},
	onPullDownRefresh() {
		currentPage.value = 1
		handleSearch()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	},

	onReachBottom() {
		this.loadMore()
	},
	
	onPageScroll(e) {
		// console.log("滚动距离为：", e);
	}
}
</script>

<style lang="scss">
.container {
	padding: 15px;
}

.parent-component {
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.search-actions {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-top: 20px;

	button {
		min-width: 100px;
	}
}
</style>